<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="static/img/logo.png" type="image/png">
    <link rel="stylesheet" href="static/css/admin.css">
    <link rel="stylesheet" href="static/css/markdown.css">
    <title>管理员后台 - 智慧答题系统</title>
    <!-- KaTeX数学公式支持 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
    <!-- Markdown解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
</head>
<body>
    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <img src="static/img/logo.png" alt="Logo">
            <h2>管理员后台</h2>
        </div>
        
        <nav class="sidebar-nav">
            <a href="#dashboard" class="nav-item active" data-page="dashboard">
                <span class="nav-icon">📊</span>
                <span class="nav-text">仪表盘</span>
            </a>
            <a href="#users" class="nav-item" data-page="users">
                <span class="nav-icon">👥</span>
                <span class="nav-text">用户管理</span>
            </a>
            <a href="#statistics" class="nav-item" data-page="statistics">
                <span class="nav-icon">📈</span>
                <span class="nav-text">数据统计</span>
            </a>
            <a href="#questions" class="nav-item" data-page="questions">
                <span class="nav-icon">📝</span>
                <span class="nav-text">题目管理</span>
            </a>
        </nav>
        
        <div class="sidebar-footer">
            <a href="/" class="back-home">返回首页</a>
            <button class="logout-btn" id="logoutBtn">退出登录</button>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 顶部栏 -->
        <header class="top-bar">
            <div class="top-bar-left">
                <h1 id="pageTitle">仪表盘</h1>
            </div>
            <div class="top-bar-right">
                <span class="user-info">管理员：<strong id="adminUsername">Admin</strong></span>
            </div>
        </header>

        <!-- 内容区域 -->
        <div class="content-area">
            <!-- 仪表盘 -->
            <div id="dashboardPage" class="page active">
                <div class="stats-cards">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: #667eea;">👥</div>
                        <div class="stat-info">
                            <div class="stat-label">总用户数</div>
                            <div class="stat-value" id="totalUsers">0</div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon" style="background: #f093fb;">📝</div>
                        <div class="stat-info">
                            <div class="stat-label">答题次数</div>
                            <div class="stat-value" id="totalQuizCount">0</div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon" style="background: #4facfe;">💯</div>
                        <div class="stat-info">
                            <div class="stat-label">总得分</div>
                            <div class="stat-value" id="totalScore">0</div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon" style="background: #43e97b;">⭐</div>
                        <div class="stat-info">
                            <div class="stat-label">平均得分</div>
                            <div class="stat-value" id="avgScore">0</div>
                        </div>
                    </div>
                </div>

                <div class="chart-section">
                    <div class="section-header">
                        <h2>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
                                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                            </svg>
                            最近活动
                        </h2>
                        <span class="activity-count" id="activityCount">加载中...</span>
                    </div>
                    <div class="activity-list" id="activityList">
                        <p class="no-data">正在加载...</p>
                    </div>
                </div>
            </div>

            <!-- 用户管理 -->
            <div id="usersPage" class="page">
                <div class="page-header">
                    <h2>用户列表</h2>
                    <div class="search-box">
                        <input type="text" id="searchInput" placeholder="搜索用户名或邮箱...">
                        <button class="search-btn">🔍</button>
                    </div>
                </div>

                <div class="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>注册时间</th>
                                <th>最后登录</th>
                                <th>答题次数</th>
                                <th>总得分</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="usersTableBody">
                            <tr>
                                <td colspan="7" class="loading">正在加载...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 数据统计 -->
            <div id="statisticsPage" class="page">
                <h2>详细统计</h2>
                <div class="stats-grid">
                    <div class="stat-box">
                        <h3>用户活跃度</h3>
                        <div class="stat-item">
                            <span class="stat-label">今日新用户</span>
                            <span class="stat-value" id="todayUsers">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">今日活跃用户</span>
                            <span class="stat-value" id="activeUsers">0</span>
                        </div>
                    </div>
                    
                    <div class="stat-box">
                        <h3>答题统计</h3>
                        <div class="stat-item">
                            <span class="stat-label">今日答题次数</span>
                            <span class="stat-value" id="todayQuiz">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">平均答题次数</span>
                            <span class="stat-value" id="avgQuiz">0</span>
                        </div>
                    </div>
                    
                    <div class="stat-box">
                        <h3>成绩分析</h3>
                        <div class="stat-item">
                            <span class="stat-label">最高得分</span>
                            <span class="stat-value" id="maxScore">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">最低得分</span>
                            <span class="stat-value" id="minScore">0</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 题目管理 -->
            <div id="questionsPage" class="page">
                <div class="page-header">
                    <h2>题目管理</h2>
                    <div class="page-header-actions">
                        <button class="btn-add" id="addQuestionBtn">➕ 添加题目</button>
                        <button class="btn-batch" id="batchImportBtn">📦 批量导入</button>
                    </div>
                </div>

                <!-- 筛选器 -->
                <div class="filters-panel" id="filtersPanel" style="display: none;">
                    <div class="filter-group">
                        <label for="filterCategory">分类筛选：</label>
                        <select id="filterCategory" class="filter-select">
                            <option value="">全部分类</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="filterDifficulty">难度筛选：</label>
                        <select id="filterDifficulty" class="filter-select">
                            <option value="">全部难度</option>
                            <option value="easy">简单</option>
                            <option value="medium">中等</option>
                            <option value="hard">困难</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <button class="btn-filter" id="applyFilterBtn">应用筛选</button>
                        <button class="btn-reset" id="resetFilterBtn">重置</button>
                    </div>
                    <div class="filter-stats">
                        <span id="filterStats">共 <strong>0</strong> 道题目</span>
                    </div>
                </div>

                <!-- 题目列表 -->
                <div class="table-container" id="questionsTableContainer" style="display: none;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th style="width: 35%;">题目</th>
                                <th style="width: 10%;">类型</th>
                                <th style="width: 15%;">分类</th>
                                <th style="width: 10%;">难度</th>
                                <th style="width: 12%;">正确答案</th>
                                <th style="width: 18%;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="questionsTableBody">
                            <tr>
                                <td colspan="6" class="loading">正在加载...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 添加题目表单 -->
                <div class="add-question-form" id="addQuestionForm" style="display: none;">
                    <h3>添加新题目</h3>
                    <form id="questionForm">
                        <div class="form-group">
                            <label for="category">分类 *</label>
                            <select id="category" name="category" required>
                                <option value="">请选择分类</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="question_type">题目类型 *</label>
                            <select id="question_type" name="question_type" required onchange="toggleQuestionType()">
                                <option value="multiple_choice">选择题</option>
                                <option value="fill_in_blank">填空题</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="title">题目内容 * <span style="font-size: 0.85em; color: #667eea; font-weight: normal;">(支持Markdown格式)</span></label>
                            <textarea id="title" name="title" rows="3" placeholder="请输入题目内容，支持Markdown格式，如 **粗体** *斜体* `代码` 等。填空题请用____表示空格" required></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label>题目配图</label>
                            <div class="image-upload-area">
                                <input type="file" id="questionImageFile" accept="image/*" style="display:none;">
                                <input type="hidden" id="question_image" name="question_image">
                                <button type="button" class="btn-upload-image" onclick="document.getElementById('questionImageFile').click()">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                        <polyline points="21 15 16 10 5 21"></polyline>
                                    </svg>
                                    上传图片
                                </button>
                                <div id="questionImagePreview" class="image-preview"></div>
                            </div>
                        </div>
                        
                        <!-- 选择题字段 -->
                        <div id="multipleChoiceFields">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="option_a">选项 A * <span style="font-size: 0.85em; color: #667eea; font-weight: normal;">(支持Markdown)</span></label>
                                <input type="text" id="option_a" name="option_a" placeholder="选项A (支持Markdown格式)" required>
                                <div class="image-upload-area-small">
                                    <input type="file" id="optionAImageFile" accept="image/*" style="display:none;">
                                    <input type="hidden" id="option_a_image" name="option_a_image">
                                    <button type="button" class="btn-upload-small" onclick="document.getElementById('optionAImageFile').click()">📷 配图</button>
                                    <div id="optionAImagePreview" class="image-preview-small"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="option_b">选项 B * <span style="font-size: 0.85em; color: #667eea; font-weight: normal;">(支持Markdown)</span></label>
                                <input type="text" id="option_b" name="option_b" placeholder="选项B (支持Markdown格式)" required>
                                <div class="image-upload-area-small">
                                    <input type="file" id="optionBImageFile" accept="image/*" style="display:none;">
                                    <input type="hidden" id="option_b_image" name="option_b_image">
                                    <button type="button" class="btn-upload-small" onclick="document.getElementById('optionBImageFile').click()">📷 配图</button>
                                    <div id="optionBImagePreview" class="image-preview-small"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="option_c">选项 C <span style="font-size: 0.85em; color: #667eea; font-weight: normal;">(支持Markdown)</span></label>
                                <input type="text" id="option_c" name="option_c" placeholder="选项C（可选，支持Markdown格式）">
                                <div class="image-upload-area-small">
                                    <input type="file" id="optionCImageFile" accept="image/*" style="display:none;">
                                    <input type="hidden" id="option_c_image" name="option_c_image">
                                    <button type="button" class="btn-upload-small" onclick="document.getElementById('optionCImageFile').click()">📷 配图</button>
                                    <div id="optionCImagePreview" class="image-preview-small"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="option_d">选项 D <span style="font-size: 0.85em; color: #667eea; font-weight: normal;">(支持Markdown)</span></label>
                                <input type="text" id="option_d" name="option_d" placeholder="选项D（可选，支持Markdown格式）">
                                <div class="image-upload-area-small">
                                    <input type="file" id="optionDImageFile" accept="image/*" style="display:none;">
                                    <input type="hidden" id="option_d_image" name="option_d_image">
                                    <button type="button" class="btn-upload-small" onclick="document.getElementById('optionDImageFile').click()">📷 配图</button>
                                    <div id="optionDImagePreview" class="image-preview-small"></div>
                                </div>
                            </div>
                        </div>
                        </div>
                        
                        <!-- 填空题字段 -->
                        <div id="fillInBlankFields" style="display: none;">
                            <div class="form-group">
                                <label for="fill_in_answer">填空题答案 * <span style="font-size: 0.85em; color: #999; font-weight: normal;">(多个答案用英文逗号分隔)</span></label>
                                <input type="text" id="fill_in_answer" name="fill_in_answer" placeholder="例如：H2O 或 氢气,H2,hydrogen">
                            </div>
                            
                            <div class="form-group">
                                <label for="fill_in_keywords">关键词 <span style="font-size: 0.85em; color: #999; font-weight: normal;">(用于模糊匹配，多个关键词用英文逗号分隔)</span></label>
                                <input type="text" id="fill_in_keywords" name="fill_in_keywords" placeholder="例如：H₂O,h2o,水分子,化学式">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group" id="multipleChoiceAnswer">
                                <label for="correct_answer">正确答案 *</label>
                                <select id="correct_answer" name="correct_answer" required>
                                    <option value="">请选择</option>
                                    <option value="A">A</option>
                                    <option value="B">B</option>
                                    <option value="C">C</option>
                                    <option value="D">D</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="difficulty">难度 *</label>
                                <select id="difficulty" name="difficulty" required>
                                    <option value="easy">简单</option>
                                    <option value="medium" selected>中等</option>
                                    <option value="hard">困难</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="explanation">答案解析 <span style="font-size: 0.85em; color: #667eea; font-weight: normal;">(支持Markdown格式)</span></label>
                            <textarea id="explanation" name="explanation" rows="3" placeholder="请输入答案解析（可选，支持Markdown格式）"></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label>解析配图</label>
                            <div class="image-upload-area">
                                <input type="file" id="explanationImageFile" accept="image/*" style="display:none;">
                                <input type="hidden" id="explanation_image" name="explanation_image">
                                <button type="button" class="btn-upload-image" onclick="document.getElementById('explanationImageFile').click()">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                        <polyline points="21 15 16 10 5 21"></polyline>
                                    </svg>
                                    上传图片
                                </button>
                                <div id="explanationImagePreview" class="image-preview"></div>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn-submit">添加题目</button>
                            <button type="button" class="btn-cancel" id="cancelQuestionBtn">取消</button>
                        </div>
                    </form>
                </div>

                <!-- 批量导入界面 -->
                <div class="batch-import-panel" id="batchImportPanel" style="display: none;">
                    <h3>批量导入题目</h3>
                    
                    <div class="import-tabs">
                        <button class="tab-btn active" data-tab="json">JSON数据</button>
                        <button class="tab-btn" data-tab="file">上传文件</button>
                    </div>

                    <!-- JSON数据导入 -->
                    <div class="import-tab-content active" id="jsonTab">
                        <div class="form-group">
                            <label>粘贴JSON数据：</label>
                            <textarea id="jsonInput" rows="15" placeholder='{"questions": [{"category_id": 1, "title": "题目内容", "option_a": "选项A", "option_b": "选项B", "correct_answer": "A", "difficulty": "medium"}]}'></textarea>
                        </div>
                        <div class="import-hint">
                            <p>📝 格式说明：</p>
                            <ul>
                                <li>必填字段: category_id, title, option_a, option_b, correct_answer</li>
                                <li>可选字段: option_c, option_d, explanation, difficulty</li>
                                <li>正确答案: A, B, C, D（大写字母）</li>
                                <li>难度: easy, medium, hard</li>
                            </ul>
                            <button class="btn-link" onclick="showExampleJSON()">查看示例</button>
                        </div>
                        <div class="form-actions">
                            <button class="btn-submit" id="importJsonBtn">导入题目</button>
                            <button class="btn-cancel" id="cancelBatchBtn">取消</button>
                        </div>
                    </div>

                    <!-- 文件上传导入 -->
                    <div class="import-tab-content" id="fileTab">
                        <div class="form-group">
                            <label>选择JSON文件：</label>
                            <input type="file" id="jsonFile" accept=".json">
                            <div class="file-info">
                                <p>📂 支持格式：.json</p>
                                <p>📊 单次最多导入：1000道题目</p>
                            </div>
                        </div>
                        <div class="import-hint">
                            <p>💡 文件格式参考：</p>
                            <a href="/static/questions_example.json" download class="btn-download">下载示例文件</a>
                        </div>
                        <div class="form-actions">
                            <button class="btn-submit" id="importFileBtn">上传并导入</button>
                            <button class="btn-cancel" id="cancelFileBatchBtn">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 进度提示弹窗 -->
    <div class="modal" id="progressModal" style="display: none;">
        <div class="modal-content">
            <h3>导入进度</h3>
            <div class="progress-info" id="progressInfo">
                <p>正在导入题目，请稍候...</p>
            </div>
        </div>
    </div>

    <!-- 题目详情弹窗 -->
    <div class="modal" id="questionDetailModal" style="display: none;">
        <div class="modal-overlay"></div>
        <div class="modal-container">
            <div class="modal-header">
                <h2>📝 题目详情</h2>
                <button class="modal-close" id="closeQuestionDetail">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>

            <div class="modal-body">
                <!-- 分类和难度 -->
                <div class="question-meta">
                    <div class="meta-item">
                        <span class="meta-icon">🏷️</span>
                        <span class="meta-label">分类：</span>
                        <span class="meta-value" id="detailQuestionCategory">-</span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-icon">⚡</span>
                        <span class="meta-label">难度：</span>
                        <span class="difficulty-badge" id="detailQuestionDifficulty">中等</span>
                    </div>
                </div>

                <!-- 题目内容 -->
                <div class="question-block">
                    <div class="block-title">题目</div>
                    <div class="question-text" id="detailQuestionTitle">-</div>
                </div>

                <!-- 选项列表 -->
                <div class="question-block">
                    <div class="block-title">选项</div>
                    <div class="options-container" id="detailQuestionOptions"></div>
                </div>

                <!-- 正确答案 -->
                <div class="question-block answer-block">
                    <div class="block-title">正确答案</div>
                    <div class="answer-display">
                        <span class="answer-badge" id="detailCorrectAnswer">A</span>
                    </div>
                </div>

                <!-- 答案解析 -->
                <div class="question-block explanation-block">
                    <div class="block-title">💡 答案解析</div>
                    <div class="explanation-text" id="detailExplanation">暂无解析</div>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn-modal-close" id="closeDetailBtn">关闭</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="static/js/admin.js"></script>
</body>
</html>

